<!DOCTYPE html>
<html lang="en"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/css/custom.css}">
    <script th:src="@{/static/layui/layui.js}"></script>
    <script th:src="@{/static/js/coreutil.js}"></script>
</head>
<body>
<!--搜索框-->
<div class="table_div" style="margin-left:12px;margin-right: 12px">
    <div class="layui-row" style="margin-top: 5px;">
        <div class="layui-col-xs2">
            <div class="grid-demo grid-demo-bg1" style="color: white">
                .
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input autocomplete="off" class="layui-input" disabled="disabled" style="background:#CCCCCC"
                               th:value="${role.roleName}" type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs1">
            <div class="grid-demo grid-demo-bg1" style="color: white">
                .
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">
                <div class="layui-form-item">
                    <label class="layui-form-label">权限字符</label>
                    <div class="layui-input-block">
                        <input autocomplete="off" class="layui-input" disabled="disabled"
                               style="background:#CCCCCC" th:value="${role.roleKey}" type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs2">
            <div class="grid-demo" style="color: white">
                .
            </div>
        </div>
    </div>
    <table class="layui-table" id="showTable" lay-filter="showTable" style="margin-top: 0px;"></table>
</div>
<script id="toolbar" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" shiro:hasPermission="role:roleUser:add"
                style="padding-left: 2px;padding-right: 5px;"><i class="layui-icon layui-icon-addition"></i>添加用户
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDeleted"
                shiro:hasPermission="role:roleUser:delete"
                style="padding-left: 2px;padding-right: 5px;"><i class="layui-icon layui-icon-delete"></i>批量取消授权
        </button>
    </div>
</script>
<script id="tool" type="text/html">
    <!--    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="role:roleUser:delete"><i
            class="layui-icon layui-icon-delete"></i>取消授权</a>
    <!--    <a class="layui-btn  layui-btn-xs" lay-event="dist">分配角色</a>-->
</script>
<!--弹出层 添加-->
<div class="site-text" id="add" style=" display: none" target="test123">
    <div class="table_div" style="margin-left:12px;margin-right: 12px">
        <table class="layui-table" id="showTable1" lay-filter="showTable"></table>
    </div>
</div>
<!--弹出层 修改-->
<script id="sta" th:inline="none" type="text/html">
    {{#  if(d.status == 0){ }}
    <span class="layui-badge layui-bg-green">正常</span>
    {{#  } else { }}
    <span class="layui-badge layui-bg-orange">禁止</span>
    {{#  } }}
</script>
</body>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    var tableIns1;
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;

    layui.use(['table', 'layer', 'laydate'], function () {
        let id = sessionStorage.getItem('id');
        //加载table
        tableIns1 = table.render({
            elem: '#showTable'
            // , contentType: 'application/json'
            , url: ctx + 'sysUserRole/listByPage?id=' + id //数据接口
            // , method: 'GET'
            , limit: 15
            , limits: [15, 25, 50, 100]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                console.log(res);
            }
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'userId', title: '用户ID', sort: true},
                    {field: 'loginName', title: '登录账号', sort: true},
                    {field: 'userName', title: '用户昵称', sort: true},
                    {field: 'email', title: '用户邮箱', sort: true},
                    {field: 'phoneNumber', title: '手机号码', sort: true},
                    {field: 'status', align: 'center', title: '状态', sort: true, templet: '#sta'},
                    {width: 180, align: 'center', toolbar: "#tool", title: '操作'}
                ]
            ]
            , page: {
                layout: ['prev', 'page', 'next', 'refresh', 'skip', 'count', 'limit']
                , first: '首页' //不显示首页
                , last: '尾页' //不显示尾页
                , groups: 3 //显示 3个连续页码
            }
            , toolbar: '#toolbar'
        });
        //添加角色表


        //表头工具
        table.on('toolbar(showTable)', function (obj) {
            switch (obj.event) {
                case 'batchDeleted':
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg("请选择要批量删除的列");
                    } else {
                        var ids = [];
                        $(data).each(function (index, item) {
                            ids.push(item.userId);       //更换成表的id
                        });
                        tipDialog(ids);
                    }
                    break;
                case 'add':

                    table.render({
                        elem: '#showTable1'
                        , url: ctx + 'sysUserRole/listByPageTo' //数据接口
                        , limit: 15
                        , limits: [15, 25, 50, 100]
                        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                            console.log(res);
                        }
                        , cols: [
                            [
                                {type: 'checkbox', fixed: 'left'},
                                {field: 'userId', title: '用户ID', sort: true},
                                {field: 'loginName', title: '登录账号', sort: true},
                                {field: 'userName', title: '用户昵称', sort: true},
                                {field: 'email', title: '用户邮箱', sort: true},
                                {field: 'phoneNumber', title: '手机号码', sort: true},
                                {field: 'status', align: 'center', title: '状态', sort: true, templet: '#sta'},
                            ]
                        ]
                        , page: {
                            layout: ['prev', 'page', 'next', 'refresh', 'skip', 'count', 'limit']
                            , first: '首页' //不显示首页
                            , last: '尾页' //不显示尾页
                            , groups: 3 //显示 3个连续页码
                        }
                        , toolbar: true
                    });
                    layer.open({
                        type: 1,
                        title: "添加角色",
                        area: ["90%", "90%"],
                        btn: ['提交', '取消'], //可以无限个按钮
                        Number: 9000000,   //自动关闭的时间
                        maxmin: true, // 最大最小化。
                        resize: true, // 是否允许拉伸
                        anim: 2,
                        content: $('#add'), //添加表单到弹出层
                        yes: function (index, layero) {
                            let list = table.checkStatus('showTable1').data;
                            console.log(list);
                            var ids1 = [];
                            $(list).each(function (index, item) {
                                ids1.push(item.userId);       //更换成表的id
                            });
                            let list1 = {id: id, list: ids1}
                            $.ajax({
                                url: ctx + 'sysUserRole/addRole',
                                async: true,
                                type: 'POST',
                                data: JSON.stringify(list1),
                                contentType: 'application/json; charset=UTF-8',
                                dataType: "json",
                                success: function (res) {
                                    console.log(res);
                                    if (res.code === 0) {
                                        layer.msg(res.msg);
                                        setTimeout(function () {
                                            location.reload();
                                        }, 500);
                                    } else {
                                        layer.msg(res.msg);
                                    }

                                }
                            })

                            console.log(ids1);
                            console.log(id);
                        }
                        , end: function (index, layero) {
                            //按钮【按钮二】的回调
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    })
                    break;
            }
            ;
        });
        //列操作
        table.on('tool(showTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del':
                    var ids = [];
                    ids.push(data.userId);   //更换成表的id
                    tipDialog(ids);
                    break;
                case 'edit':
                    //
                    // document.getElementById("userId").value = data.userId;
                    // document.getElementById("deptId").value = data.deptId;
                    // document.getElementById("loginName").value = data.loginName;
                    // document.getElementById("userName").value = data.userName;
                    // document.getElementById("userType").value = data.userType;
                    // document.getElementById("email").value = data.email;
                    // document.getElementById("phoneNumber").value = data.phoneNumber;
                    // document.getElementById("sex").value = data.sex;
                    // document.getElementById("avatar").value = data.avatar;
                    // document.getElementById("password").value = data.password;
                    // document.getElementById("salt").value = data.salt;
                    // document.getElementById("status").value = data.status;
                    // document.getElementById("delFlag").value = data.delFlag;
                    // document.getElementById("loginIp").value = data.loginIp;
                    // document.getElementById("loginDate").value = data.loginDate;
                    // document.getElementById("pwdUpdateDate").value = data.pwdUpdateDate;
                    // document.getElementById("createBy").value = data.createBy;
                    // document.getElementById("createTime").value = data.createTime;
                    // document.getElementById("updateBy").value = data.updateBy;
                    // document.getElementById("updateTime").value = data.updateTime;
                    // document.getElementById("remark").value = data.remark;

                    layer.open({
                        type: 1,
                        title: "修改",
                        area: ["800px", "600px"],

                        // btn: ['提交', '取消'], //可以无限个按钮
                        Number: 9000000,   //自动关闭的时间
                        maxmin: true, // 最大最小化。
                        resize: true, // 是否允许拉伸
                        anim: 2,
                        content: $('#up'), //添加表单到弹出层

                    })
                    break;
            }
        });

        //导出
        $('#export').on('click', function () {
            //原先分页limit

            var exportParams = {
                limit: 10000,
                key: $("#key").val(),
            };

            let url = ctx + "sysUserRole/listByPage"
            console.log(exportParams);
            coreUtilsendPost(url, exportParams, function (res) {
                //初始化渲染数据
                if (res.data != null && res.data.records != null) {

                    console.log("=================================================");
                    table.exportFile(tableIns1.config.id, res.data.records, 'xls');
                }
            });
        });

        //删除
        var tipDialog = function (ids) {
            layer.open({
                content: "确定要删除么?",
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    let url = ctx + "sysUserRole/delete"
                    console.log(ids);
                    coreUtilsendDelete(url, ids, function (res) {
                        layer.msg(res.msg, {time: 1000}, function () {
                            search();
                        });
                    });
                }
            });
        };

        //返回
        $("#btn_cancel").click(function () {
            layer.closeAll(); //关闭所有弹窗
            return false;
        });
        //返回
        $("#btn_cancel1").click(function () {
            layer.closeAll(); //关闭所有弹窗
            return false;
        });

        //监听保存
        form.on('submit(submit)', function (data) {
            if (data.field.user_id === undefined || data.field.user_id === null || data.field.user_id === "") {     //更换成表的id
                // let url = ctx + "sysUser/add";
                coreUtilsendPost(url, data.field, function (res) {
                    $(".table_div").show();
                    $(".operation").hide();
                    search();
                });
            } else {

                // let url = ctx + "sysUser/update";
                coreUtilsendPut(url, data.field, function (res) {
                    $(".table_div").show();
                    $(".operation").hide();
                    search();
                });
            }

            return false;
        });
    });

    //执行查询
    function search() {
        //这里以搜索为例
        tableIns1.reload({
            where: { //设定异步数据接口的额外参数，任意设
                key: $("#key").val()
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    };
</script>
</html>

